<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>初识Vue</title>
    <!-- 
				常用的生命周期钩子：
						1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
						2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

				关于销毁Vue实例
						1.销毁后借助Vue开发者工具看不到任何信息。
						2.销毁后自定义事件会失效，但原生DOM事件依然有效。
						3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
		-->
    <script type='text/javascript' src='../js/vue.js'></script>
</head>

<body>
    <div id='root'>
        <h2 v-text="n"></h2>
        <div><h2>当前的n是：{{n}}</h2><button @click="add">n++</button></div>
        <button @click="bye">销毁</button>
    </div>
    <script type='text/javascript'>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        //创建Vue实例
        new Vue({//如果没有值走模板
            el: '#root',
            // template:
            // `
            // <div><h2>当前的n是：{{n}}</h2><button @click="add">n++</button></div>
            
            // `,
            data: {
                n:1
            },
            methods: {
                add(){
                    console.log("1")
                    this.n++
                },
                bye(){
                    this.$destroy()
                }
            },
            watch:{
              n(){
                  console.log("n")
              }
            },
            beforeCreate() {//没有_data methods 代理 数据
                console.log("beforeCreate")
            },
            created() {//有_data methods
                console.log("created")
                
            },
            beforeMount() {//未解析 这是时候操作dom最终不奏效
                console.log("beforeMount")
            },
            mounted() {//挂载  初始化结束
                console.log("mounted")
                console.log("mounted",this.$el instanceof HTMLElement)//是不是dom元素
            },
            beforeUpdate() {//数据是新的页面是旧的
                console.log("beforeUpdate")
            },
            updated() {//数据页面都是新的
                console.log("updated")
                console.log(this) 
            },
            beforeDestroy() {//这个时候修改不起作用
                console.log("beforeDestroy")
            },
            destroyed() {
                console.log("destroyed")
            },
        })
    </script>
</body>

</html>